@mixin respond($breakpoint) {
  @if ($breakpoint== 'xs') {
    @media (max-width: 575px) {
      @content;
    }
  }
  @if ($breakpoint== 'sm') {
    @media (min-width: 576px) and (max-width: 767px) {
      @content;
    }
  }
  @if ($breakpoint== 'as') {
    @media (max-width: 768px) {
      @content;
    }
  }
  @if ($breakpoint== 'ab') {
    @media (min-width: 769px) {
      @content;
    }
  }
  @if ($breakpoint== 'am') {
    @media (max-width: 991px) {
      @content;
    }
  }
  @if ($breakpoint== 'fm') {
    @media (min-width: 992px) {
      @content;
    }
  }
  @if ($breakpoint== 'md') {
    @media (min-width: 768px) and (max-width: 991px) {
      @content;
    }
  }
  @if ($breakpoint== 'lg') {
    @media (min-width: 992px) and (max-width: 1199px) {
      @content;
    }
  }
  @if ($breakpoint== 'md-lg') {
    @media (min-width: 768px) and (max-width: 1199px) {
      @content;
    }
  }
  @if ($breakpoint== 'xl') {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

@mixin text {
  color: $color-text;
  font-size: 1.4rem;
  letter-spacing: 1px;
  margin: 0;
  transition: 0.1s color;
}

@mixin triangle($dir, $size, $color) {
  border: $size transparent solid;
  @if ($dir== 'top' or $dir== 'up') {
    border-bottom-color: $color;
  } @else if ($dir== 'right' or $dir== 'after') {
    border-left-color: $color;
  } @else if ($dir== 'bottom' or $dir== 'down') {
    border-top-color: $color;
  } @else if ($dir== 'left' or $dir== 'before') {
    border-right-color: $color;
  }
}
